<template>
 <div class="login-bg wh-full">
     <div class="form-box bg-f pos-abs">
         <p class="font-36px text-center mar-tb-20px">星辰大海</p>
        <el-form :model="loginParams" status-icon  ref="loginForm"
            class="login-form" :rules="rules">
            <el-form-item  prop="username" :require="true" class="mar-tb-30px">
                <el-input type="text" v-model="loginParams.username"
                    autocomplete="off" placeholder="用户名" require="true"></el-input>
            </el-form-item>
            <el-form-item  prop="password" :require="true" class="mar-tb-30px">
                <el-input type="password" v-model="loginParams.password"
                        autocomplete="off" placeholder="密码" ></el-input>
            </el-form-item>
            <el-form-item class="text-center" >
                <el-button type="primary"
                    @click="submitForm('loginForm')"  class="w-full">登录</el-button>
                    <span class="col-409eff pointer" @click="register">注册</span>
            </el-form-item>
        </el-form>
     </div>
 </div>
</template>
<script>
export default {
  name: 'Index',
  data(){
      return {
          loginParams:{
              username: '',
              password: ''
          },
          rules:{
              username:[
                { required: true, message: '请输入用户名', trigger: 'blur' },
              ],
              password: [
                { required: true, message: '请输入密码', trigger: 'blur' }
              ],
          }
      }
  },
  created(){
     this.loginParams.username =  this.$store.state.username
     this.loginParams.password =  this.$store.state.password
  },
  components: {
  },
  methods:{
      submitForm(ref){
        this.$refs[ref].validate((state)=>{
            if(state){
                this.$store.dispatch("LoginByUsername", this.loginParams)
                .then(res=>{
                    this.$message(res.msg)
                    setTimeout(()=>{
                      this.$router.replace("/v2/learn")
                    },1000)
                })

            }
        })
      },
      register(){
          this.$router.replace("/register")
      }
  }
}
</script>

<style>
@import "~@/assets/css/login.css";
</style>
